<template>
    <div class="chart-box">
        <canvas :id="id" height="200px"></canvas>
    </div>
</template>

<script>
import F2 from "@antv/f2/lib/index-all";
import $ from "jquery";
import { serchReport } from "../../services/control";
import { Toast } from "mand-mobile";

export default {
    props: ["data", "id", "type"],
    data() {
        return {};
    },
    methods: {
        initChart() {
            const tempData = this.$props.data;
            const type = this.$props.type;
            let total;
            let data = [];
            let totalStr = "";
            if (type === "top") {
                data = [
                    {
                        name: "正常病人数",
                        percent:
                            tempData.totalPatientcnt -
                            tempData.outlierPatientCnt,
                        a: "1"
                    },
                    {
                        name: "异常病人数",
                        percent: tempData.outlierPatientCnt,
                        a: "1"
                    }
                ];
                total = tempData.totalPatientcnt;
                totalStr = "质控病人总数";
            } else {
                data = [
                    {
                        name: "处理成功数",
                        percent: tempData.finishCnt - tempData.errorCnt,
                        a: "1"
                    },
                    {
                        name: "处理失败数",
                        percent: tempData.errorCnt,
                        a: "1"
                    }
                ];
                total = tempData.finishCnt;
                totalStr = "处理总数";
            }

            const map = {};
            data.map(obj => {
                map[obj.name] = obj.percent + "人";
            });

            const chart = new F2.Chart({
                id: this.$props.id,
                pixelRatio: window.devicePixelRatio,
                padding: [-10, 20, 10, 20]
            });
            chart.source(data, {
                percent: {
                    formatter: function formatter(val) {
                        return val + "人";
                    }
                }
            });
            chart.tooltip(false);
            chart.legend({
                position: "bottom",
                itemFormatter: function itemFormatter(val) {
                    return val + "    " + map[val];
                }
            });
            chart.coord("polar", {
                transposed: true,
                innerRadius: 0.7,
                radius: 0.8
            });
            chart.axis(false);
            chart
                .interval()
                .position("a*percent")
                .color("name", ['l(180) 0:#1DB7FD 1:#4764FD', "#F1F2F4", "#737DDE"])
                .adjust("stack");

            chart.guide().html({
                position: ["50%", "45%"],
                html:
                    '<div style="width: 250px;height: 40px;text-align: center">' +
                    '<div style="font-size: 16px;margin-top:10px">' +
                    totalStr +
                    "</div>" +
                    '<div style="font-size: 24px">' +
                    total +
                    " 人</div>" +
                    "</div>"
            });
            chart.render();
        }
    },
    mounted() {
        this.initChart();
    }
};
</script>

<style lang="stylus" scoped>
.chart-box {
    width: 100%;
}

canvas {
    width: 350PX;
}
</style>
